<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .del{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="add">新增</button>
        <table border="1" width="70%">
            <thead>
                <tr>
                    <th width="200">id</th>
                    <th>姓名</th>
                    <th width="60">班级</th>
                    <th width="160">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in table">
                    <td>{{item.id}}</td>
                    <td :class="{del:item.isdel}">{{item.name}}</td>
                    <td>{{item.class_id | classFilters(classList)}}</td>
                    <td>
                        <button @click="graduation(item.id)" :disabled="item.isdel">毕业</button>
                        <button @click="edit(item.id)" :disabled="item.isdel">编辑</button>
                        <button @click="del(item.id)" :disabled="item.isdel">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>


        <form v-show="isShow">
            <label>姓名</label>
            <input type="text" v-model="form.name">
            <br />
            <label>班级</label>
            <select v-model="form.class" >
                <option v-for="item in classList" :value="item.id">{{item.name}}</option>
            </select>
            <br />
            <button type="button" @click="submit">提交</button>
            <button type="button" @click="closeForm" >关闭</button>
        </form>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    isShow:false,
                    isEdit:false,
                    form:{
                      name:null,
                      class:null  
                    },
                    table:[
                        {
                            id:1,
                            name:'佐助',
                            class_id:1,
                            isdel:false,
                        },
                        {
                            id:2,
                            name:'鸣人',
                            class_id:2,
                            isdel:false,
                        }
                    ],
                    classList:[
                        {
                            id:1,
                            name:'一班'
                        },
                        {
                            id:2,
                            name:'二班'
                        },
                        {
                            id:3,
                            name:'三班'
                        }
                    ]
                }
            },
            filters:{
                classFilters(val,_class){
                    const index = _class.findIndex(item=>item.id === val)
                    return _class[index].name
                }
            },
            methods:{
                // 表单提交
                submit(){
                    // 如果isEdit为false，代表新增
                    if(!this.isEdit){
                        const obj = {
                            id:Date.now(),
                            name:this.form.name,
                            class_id:this.form.class,
                            isdel:false,
                        }
                        this.table.unshift(obj)
                    }else{
                        const index = this.table.findIndex(item=>item.id===this.form.id)
                        this.table[index].name = this.form.name
                        this.table[index].class_id = this.form.class  
                    } 
                    this.clearFrom()
                },
                add(){
                    this.isShow = true
                },
                // 表单编辑
                edit(id){
                    const index = this.table.findIndex(item=>item.id===id),
                         row = this.table[index]
                    this.form.name = row.name
                    this.form.class = row.class_id
                    this.form.id = row.id
                    this.isEdit = true
                    this.isShow = true
                },
                // 数据删除
                del(id){
                    const result = confirm('确定删除吗？删除后不能找回！')
                    if(result){
                        const index = this.table.findIndex(item=>item.id===id)
                        this.table.splice(index,1)
                    }
                },
                clearFrom(){
                    this.form.name = null
                    this.form.class = null
                    this.isShow = false
                },
                // 关闭模态框
                closeForm(){
                    this.isShow = false
                },
                graduation(id){
                    const index = this.table.findIndex(item=>item.id===id)
                    this.table[index].isdel = true 
                }
            }
        })
    </script>
</body>
</html>